<template>
  <div class="viewer-container relative">
    <div class="viewer-main">
      <!-- flex布局:水平方向 -->
      <div class="h-box relative">
        <!-- 绘图区 -->
        <div id="VentNetGraph" ref="diagramContainer" class="box-item ocx-container" />
      </div>
    </div>
    <!-- 右下角视图工具栏(始终悬浮在绘图区的上面) -->
    <!-- <div class="view-toolbar">
      <div class="h-toolbar box-item">
        <toolbar mode="horizontal" :actions="ToolbarActions.View" />
      </div>
    </div>-->
  </div>
</template>

<script>
import { mapActions } from 'vuex'
// import Toolbar from '../../components/toolbar'
// import ToolbarActions from '../../actions/toolbar'

// 监控元素属性变化的2种方法:
// 1) 使用element-resize-detector模块(原理未知???)
// https://www.jianshu.com/p/b9004cb2fa2c
// https://blog.csdn.net/csl125/article/details/89245267
// https://segmentfault.com/q/1010000017388016
// 2) 使用MutationObserver API(HTML5标准)
// https://blog.csdn.net/zfz5720/article/details/83095535
// https://blog.csdn.net/u010419337/article/details/81474311
import elementResizeDetectorMaker from 'element-resize-detector'

function IsEqual(x, y, precision = 0.001) {
  return Math.abs(x - y) < precision
}

export default {
  // components: {
  //   Toolbar
  // },
  data() {
    return {
      // ocx控件id(目前该页面只有1个ocx控件)
      id: 'VentNetGraph',
      // div容器尺寸
      width: 0,
      height: 0,
      // 监控ocx控件的父容器尺寸变化
      erd: null
      // ToolbarActions
    }
  },
  mounted() {
    // 记录父容器的尺寸
    this.width = this.$refs.diagramContainer.offsetWidth
    this.height = this.$refs.diagramContainer.offsetHeight
    // console.log('xx:', this.width, this.height)
    // 监听ocx控件的父容器尺寸变化
    this.listenViewerSize()
    // 创建并初始化ocx控件
    this.createDiagram({
      id: this.id,
      parent: this.$refs.diagramContainer
    })
  },
  beforeDestroy() {
    // 完全删除检测器和所有侦听器
    this.erd.uninstall(this.$refs.diagramContainer)
    this.$store.dispatch('editor/diagram/unInit')
  },
  methods: {
    ...mapActions('editor/diagram', {
      regDiagram: 'registry',
      initDiagram: 'init',
      unInitDiagram: 'unInit',
      setState: 'setState'
    }),
    // 监听ocx控件的父容器尺寸变化
    listenViewerSize() {
      // 创建实例
      this.erd = elementResizeDetectorMaker()
      this.erd.listenTo(this.$refs.diagramContainer, this.onContainerResize)
    },
    // ocx控件的父容器尺寸变化响应函数
    onContainerResize(element) {
      const width = element.offsetWidth
      const height = element.offsetHeight
      if (IsEqual(width, this.width) && IsEqual(height, this.height)) {
        // console.log(
        //   '父容器尺寸变化不大,忽略不计',
        //   'new:',
        //   width,
        //   height,
        //   'old:',
        //   this.width,
        //   this.height
        // )
        return
      } else {
        console.log('父容器尺寸变化 -> Size: ' + width + 'x' + height)
        // ocx控件的尺寸跟随父容器变化!!!
        this.$nextTick(() => {
          this.$store.dispatch('editor/diagram/resize', { width, height })
        })
      }
      this.width = width
      this.height = height
    },
    // 初始化ocx控件
    createDiagram({ id, parent }) {
      const that = this
      // 注册控件
      this.regDiagram({
        id,
        parent
      }).then(() => {
        // console.log('--------------- initOcx -----------------')
        // 初始化控件
        return that.initDiagram()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/variable.scss';

.relative {
  position: relative;
}

.viewer-container {
  width: 100%;
  height: 100%;

  .viewer-main {
    width: 100%;
    height: 100%;

    .h-box {
      // @extend %toolbar-color2;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
    }

    .v-box {
      @extend %toolbar-color2;
      // width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .v-toolbar {
      @extend %toolbar-color2;
      width: 30px;
      height: 100%;
      padding: 5px 0;
    }

    .fixed-item {
      flex-grow: 0;
    }

    .box-item {
      flex: 1;
    }

    .ocx-container {
      @extend %toolbar-color2;
      // background-color: #302821;
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      border: none;
      position: relative;

      // 去除画布的蓝色默认border
      >>> canvas {
        border: 0px !important;
        outline: none !important;
      }
    }
  }

  .view-toolbar {
    z-index: 50000;
    position: absolute;
    bottom: 34px;
    right: 46px;
    // right: 40%;
    width: 180px;
    height: 36px;
    line-height: 36px;

    .h-box {
      width: 100%;
    }

    .box-item {
      display: inline-block;
      vertical-align: middle;
      overflow: hidden;
    }

    .h-toolbar {
      height: 100%;
      // @extend %toolbar-color2;
      background-color: rgb(245, 245, 245) !important;
      margin: 0px 0;
    }
  }
  @import '../../style/scrollbar.scss';
}
</style>
